import React from 'react'
let msg = 'Hello'  //普通数据，数据的改变不能自动引发视图更新
let good = {price:99,num:3}
let happy = false
//普通函数
function doSomething(weather){
  if(weather=='下雨'){
    return '打雨伞'
  }
  if(weather=='晴'){
    return '打太阳伞+防晒霜'
  }
  if(weather=='阴'){
    return '戴墨镜'
  }
}
let ele = <h1>我是外面的JSX标签</h1>
//函数式组件，首字母必须大写
export default function Test() {
  return (
    <div>
      {/* 1. 基本数据渲染 */}
      <p>{msg}</p>
      {/* 2. 基本运算 */}
      <p>商品价格小计: {good.price * good.num} </p>
      {/* 3. 模板字符串 */}
      <p>价格:xxx 数量:xxx</p>
      <p>不使用模板字符串，价格:{good.price} 数量:{good.num}</p>
      <p>{`模板字符串写法，价格:${good.price} 数量:${good.num}`}</p>
      {/* 4. 三目运算、条件渲染 */}
      {
        happy
        ?
        <h2>好好学习</h2>
        :
        <h2>打打游戏</h2>
      }
      
      {/* 5. 函数调用，处理更复杂的逻辑需求 */}
      <h2>{doSomething('晴')}</h2>
      
      {/* 6. 逻辑运算（与或非） */}
      <h2>{'Hello'||'React'}</h2>

      {/* 7. JSX嵌套 */}
      {ele}
    </div>
  )
}
